@mixin btn-status($border-color, $bg-color) {
  border: 1px solid $border-color;
  background-color: $bg-color;

  &:hover {
    background-color: tint($bg-color, 20%);
  }
}

@mixin btn-hollow-status($color) {
  border: 1px solid $color;
  background-color: $color-white;
  color: $color;

  &:hover {
    background-color: tint($color, 20%);
    color: $color-white;
  }
}

.xx-btn {
  display: inline-block;
  outline: 0;
  text-align: center;
  white-space: nowrap;
  transition: 0.2s;
  user-select: none;
  cursor: pointer;
  margin-left: 8px;
  background-color: $color-white;
  color: $font-color-default;
  font-size: $font-size-14;
  border: 1px solid $btn-border-normal-color;
  border-radius: $btn-border-radius;
  background-color: $btn-bg-normal;
  padding: $btn-padding-base;

  &-default {
    &:hover {
      border-color: $color-primary;
      color: $color-primary;
    }
    &:disabled,
    &:disabled:hover,
    &:disabled:active {
      background-color:transparent;
    }
  }

  &-primary,
  &-success,
  &-warn,
  &-error {
    color: $color-white;
  }

  &-primary {
    @include btn-status($color-primary, $color-primary);

    &-hollow {
      @include btn-hollow-status($color-primary);
    }
  }

  &-success {
    @include btn-status($color-success, $color-success);

    &-hollow {
      @include btn-hollow-status($color-success);
    }
  }

  &-warn {
    @include btn-status($color-warn, $color-warn);

    &-hollow {
      @include btn-hollow-status($color-warn);
    }
  }

  &-error {
    @include btn-status($color-error, $color-error);

    &-hollow {
      @include btn-hollow-status($color-error);
    }
  }

  &-text {
    border: none;
  
    &:hover {
      color: $color-primary;
    }

    &:disabled,
    &:disabled:hover,
    &:disabled:active {
      background: none;
    }
  }

  &-disabled {
    cursor: not-allowed;
    color: $color-disabled;
    border-color: $btn-border-disable-color;
    background-color: $btn-bg-disabled;

    &:hover {
      color: $color-disabled;
      border-color: $btn-border-disable-color;
      background-color: $btn-bg-disabled;
    }
  }

  &-smaller {
    padding: $btn-padding-smer;
    &.xx-btn-circle {
      width: $btn-circle-size-smer;
      height: $btn-circle-size-smer;

      .xx-btn__icon {
        font-size: $btn-font-size-smer;
      }
    }
  }

  &-small {
    padding: $btn-padding-sm;
    &.xx-btn-circle {
      width: $btn-circle-size-sm;
      height: $btn-circle-size-sm;

      .xx-btn__icon {
        font-size: $btn-font-size-sm;
      }
    }
  }

  &-large {
    padding: $btn-padding-lg;
    &.xx-btn-circle {
      width: $btn-circle-size-lg;
      height: $btn-circle-size-lg;

      .xx-btn__icon {
        font-size: $btn-font-size-lg;
      }
    }
  }

  &-circle {
    width: $btn-circle-size;
    height: $btn-circle-size;
    border-radius: 50%;
    padding: 0;
  }

  &__icon {
    display: inline-block;
    font-size: $font-size-14;
    & + span {
      margin-left: 4px;
    }
  }
  
  &__loading {
    animation: loadingCircle 1s linear infinite;
  }
}
